<!-- 组织架构图右侧组件 -->
<script lang="tsx">
import {
  PostOrganizationList,
  PostOrganizationMerge,
  DelOrganizationList
} from '@/apis/management/organization/organizationManagement';
import { Message, Modal } from '@arco-design/web-vue';
import { defineComponent } from 'vue';
import AddOrganization from '../../../Structure/Components/AddOrganization/index.vue';
import { useRouter } from 'vue-router';
import IconFont from '@/components/IconFont/index.vue';
import clonedeep from 'lodash.clonedeep';
import type { treeDataType } from '../../type';
import { GetHumanRosterDetail } from '@/apis/management/human/humanRoster';
import { IconUser } from '@arco-design/web-vue/es/icon';
import { template } from 'lodash';
export default defineComponent({
  props: ['data'],
  emits: ['loading'],
  setup(props: { data: any }, context) {
    watch(
      () => props.data,
      (val) => {
        originTreeData.data = val;
      }
    );

    const organizationVisible = ref(false);
    const superiorId = ref(0);
    const superiorData = ref();
    const router = useRouter();
    const container = ref<any>();
    const originTreeData = reactive<{ data: any }>({ data: {} });
    const Node = ref();
    const proportion = ref(1);
    const avatar = ref(32);
    const initStyle = reactive({
      width: 250,
      height: 100,
      lineHeight: 44
    });
    const move = () => {
      const container: any = document.getElementsByClassName('container');
      let flag: boolean;
      let downX: number;
      let downY: number;
      let scrollLeft: number;
      let scrollTop: number;

      Node.value.addEventListener('mousedown', function (event: MouseEvent) {
        const _this = this as HTMLElement;
        container[0].style.cursor = 'grabbing';
        flag = true;
        downX = event.clientX;
        downY = event.clientY;
        scrollLeft = _this.scrollLeft;
        scrollTop = _this.scrollTop;
        console.log('mousedown', scrollX, scrollY);
      });

      Node.value.addEventListener('mousemove', function (event: MouseEvent) {
        if (flag) {
          const _this = this as HTMLElement;
          var moveX = event.clientX;
          var moveY = event.clientY;
          var scrollX = moveX - downX;
          var scrollY = moveY - downY;
          _this.scrollLeft = scrollLeft - scrollX;
          _this.scrollTop = scrollTop - scrollY;
          console.log('mousemove', _this.scrollHeight, scrollTop, scrollY);
          console.log('Node', Node.value, Node.value.scrollTop);
          console.dir(Node.value);
        }
      });

      Node.value.addEventListener('mouseup', function () {
        container[0].style.cursor = 'grab';
        flag = false;
      });

      Node.value.addEventListener('mouseleave', function (event: any) {
        flag = false;
      });
    };
    const getDetails = async (id: number, data: treeDataType & any) => {
      if (data?.personnelData) return;
      const res: any = await GetHumanRosterDetail({ id });
      data.personnelData = {};
      res?.forEach((ele: any) => {
        if (ele.code === 'CDC80FC12D1DE43018D098E8322D0F966') {
          data.personnelData.JobNumber = ele.value;
        }
        if (ele.code === 'C5B3625070EFD4698A20925CE32B31F16') {
          data.personnelData.rank = ele.value;
        }
        if (ele.code === 'CC3B7E3812CB74CEBAA2E57AF927F8189') {
          data.personnelData.company = ele.value;
        }
        if (ele.code === 'C2CB71FCF495347F896C7802ED9594BCA') {
          data.personnelData.department = ele.value;
        }
        if (ele.code === 'C4CBDEC96F74344FD8CED137416BD1D3D') {
          data.personnelData.startDate = ele.value;
        }
        if (ele.code === 'C3384BE6E60C341D68B8180DA04A1C4E1') {
          data.personnelData.phoneNumber = ele.value;
        }
        if (ele.code === 'C3384BE6E60C341D68B8180DA04A1C4E1') {
          data.personnelData.telephone = ele.value;
        }
        if (ele.code === 'C612A1730AFBF44F8B16A5B681F5B5B86') {
          data.personnelData.workType = ele.value;
        }
        if (ele.code === 'CE009C2E2B542409D815F0D3D54FE0E2B') {
          data.personnelData.workLocation = ele.value;
        }
      });
    };
    const go = (id: number) => {
      router.push({
        name: 'HumanRosterDetail',
        query: {
          id
        }
      });
    };

    const enlarge = () => {
      proportion.value += 0.05;
    };

    const shrink = () => {
      if (proportion.value > 0) proportion.value -= 0.05;
    };
    nextTick(() => {
      move();
    });

    const renderNode = (data: treeDataType, top: any = true) => {
      // const topStyle = {
      //   width: !top ? container.value?.scrollWidth + 'px' : '100%'
      // };
      return (
        <>
          <div class="render">
            <div class="head-line" style={`height: ${initStyle.lineHeight}px`}>
              <div class={{ 'bon-line': top }}></div>
            </div>
            <div
              v-show={data.layout}
              class="main"
              style={`width: ${initStyle.width}px;height: ${initStyle.height}px`}
              onClick={() => {
                data.btnShow = !data.btnShow;
              }}
            >
              <div style="position: relative;">
                <div class="duty-mian" v-show={data.userShow}>
                  <div class="title" style="background: #5b8ff9;color: #fff;">
                    <div>部门负责人信息</div>
                    {/* <a-button type="primary" size={16}>
                      查看详情
                    </a-button> */}
                  </div>
                  <div class="user">
                    <div class="left">
                      <a-avatar size={avatar.value}>
                        <IconUser />
                      </a-avatar>
                      <div>
                        <p>{data.name}</p>
                        <p>
                          {data?.position || '经理'} 司龄
                          {data?.personnelData?.Siling || 1}
                        </p>{' '}
                      </div>
                    </div>
                    {/* <div class="right">
                      <p>司龄</p>
                      <p>{data?.personnelData?.Siling || 1}</p>
                    </div> */}
                  </div>
                  <div class="personnelData">
                    {/* <div class="information"> */}
                    <div>
                      <p>
                        工号：{data?.personnelData?.JobNumber || 'LY-00001'}
                      </p>
                    </div>{' '}
                    <div v-show={data.rankShow.show}>
                      <p>职级：{data?.personnelData?.rank || '1'}</p>
                    </div>
                    {/* </div> */}
                    {/* <div class="information"> */}
                    <div>
                      <p>
                        所属公司：{data?.personnelData?.company || '领壹集团'}
                      </p>
                    </div>{' '}
                    <div>
                      <p>
                        所属部门：
                        {data?.personnelData?.department || '生产部'}
                      </p>
                    </div>
                    {/* </div> */}
                    {/* <div class="information"> */}
                    <div>
                      <p>
                        入职日期：
                        {data?.personnelData?.startDate || '2023-02-16'}
                      </p>
                    </div>{' '}
                    <div v-show={data.contactInformationShow.show}>
                      <p>
                        手机号码：
                        {data?.personnelData?.phoneNumber || '19163766962'}
                      </p>
                    </div>
                    {/* </div> */}
                    {/* <div class="information"> */}
                    <div v-show={data.contactInformationShow.show}>
                      <p>
                        工作电话：
                        {data?.personnelData?.telephone || '82277822'}
                      </p>
                    </div>{' '}
                    <div v-show={data.contactInformationShow.show}>
                      <p>
                        工作邮箱：
                        {data?.personnelData?.mailbox || '1447895248@qq.com'}
                      </p>
                    </div>
                    {/* </div> */}
                    {/* <div class="information"> */}
                    <div>
                      <p>员工类型：{data?.personnelData?.workType || '全职'}</p>
                    </div>{' '}
                    <div>
                      <p>
                        工作地点：
                        {data?.personnelData?.workLocation || '广州市'}
                      </p>
                    </div>
                    {/* </div> */}
                  </div>
                </div>
              </div>
              <div class="top">
                <div class="left">
                  <icon-layers style="margin-right: 5px;" />
                  {data.department}({data.node})
                </div>
                <a-popover title="点击切换">
                  <icon-menu
                    onClick={(e) => {
                      e.stopPropagation();
                      data.layout = false;
                    }}
                  />
                </a-popover>
              </div>
              <div class="cn">
                <div class="left">
                  <p onClick={() => go(data.userId)}>{data.name || '佚名'}</p>
                  <p v-show={data.topPositionShow.show}>
                    {data.position || '经理'}
                  </p>
                </div>
                <a-avatar
                  style={{ backgroundColor: '#b8d4ff' }}
                  v-show={data.avatarShow.show}
                  size={avatar.value}
                  onClick={(e) => {
                    e.stopPropagation();
                    data.userShow = !data.userShow;
                    getDetails(data.userId, data);
                  }}
                >
                  <IconUser />
                </a-avatar>
              </div>
              <div class="bottom">
                <a-popover title="员工">
                  <div class="icon" v-show={data.employeeShow.show}>
                    <icon-user style="margin-right: 5px;" />
                    {data.personnel || 20}
                  </div>
                </a-popover>
                <a-popover title="编制">
                  <div class="icon" v-show={data.establishmentShow.show}>
                    <icon-user-group style="margin-right: 5px;" />
                    {data.authorized}
                  </div>
                </a-popover>
                <a-popover title="职位">
                  <div class="icon" v-show={data.positionShow.show}>
                    <icon-storage style="margin-right: 2px;" />
                    {data.position || 20}
                  </div>
                </a-popover>
              </div>
              <div class="operation" v-show={data.btnShow}>
                <icon-minus-circle
                  size={18}
                  style="color:#5B8FF9;background: #f3f8fe;"
                />
                <div class="operation-all">
                  <a-tooltip content="新增" style="margin-right: 10px;">
                    <a-image
                      onClick={() => add(data)}
                      width="24"
                      src="/src/assets/images/icon/add.svg"
                      preview-visible={false}
                    />
                  </a-tooltip>
                  {/* <a-tooltip content="移动">
                    <a-image
                      width="24"
                      src="/src/assets/images/icon/move.svg"
                      preview-visible={false}
                    />
                  </a-tooltip>
                  <a-tooltip content="合并">
                    <a-image
                      width="24"
                      src="/src/assets/images/icon/merge.svg"
                      preview-visible={false}
                    />
                  </a-tooltip>
                  <a-tooltip content="复制">
                    <a-image
                      width="24"
                      src="/src/assets/images/icon/copy.svg"
                      preview-visible={false}
                    />
                  </a-tooltip> */}
                  <a-tooltip content="删除" position="left">
                    <a-image
                      onClick={() => del(data.id)}
                      width="24"
                      src="/src/assets/images/icon/del.svg"
                      preview-visible={false}
                    />
                  </a-tooltip>
                </div>
              </div>
            </div>
            {/* 竖着的 */}
            <div
              class="vertical-main"
              v-show={!data.layout}
              onClick={() => {
                data.btnShow = !data.btnShow;
              }}
            >
              <div style="position: relative;">
                <div class="duty-mian" v-show={data.userShow}>
                  <div class="title" style="background: #5b8ff9;color: #fff;">
                    部门负责人信息
                  </div>
                  <div class="user">
                    <div class="left">
                      <a-avatar size={avatar.value}>
                        <IconUser />
                      </a-avatar>
                      <div>
                        <p>{data.name}</p>
                        <p>{data?.position || '经理'}</p>
                      </div>
                    </div>
                    <div class="right">
                      <p>司龄</p>
                      <p>{data?.personnelData?.Siling || 1}</p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>工号：</p>
                      <p>{data?.personnelData?.JobNumber || 'LY-00001'}</p>
                    </div>{' '}
                    <div>
                      <p>职级：</p>
                      <p>{data?.personnelData?.rank || '1'}</p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>所属公司：</p>
                      <p>{data?.personnelData?.company || '领壹集团'}</p>
                    </div>{' '}
                    <div>
                      <p>所属部门：</p>
                      <p>{data?.personnelData?.department || '生产部'}</p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>入职日期：</p>
                      <p>{data?.personnelData?.startDate || '2023-02-16'}</p>
                    </div>{' '}
                    <div>
                      <p>手机号码：</p>
                      <p>{data?.personnelData?.phoneNumber || '19163766962'}</p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>工作电话：</p>
                      <p>{data?.personnelData?.telephone || '82277822'}</p>
                    </div>{' '}
                    <div>
                      <p>工作邮箱：</p>
                      <p>
                        {data?.personnelData?.mailbox || '1447895248@qq.com'}
                      </p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>员工类型：</p>
                      <p>{data?.personnelData?.workType || '全职'}</p>
                    </div>{' '}
                    <div>
                      <p>工作地点：</p>
                      <p>{data?.personnelData?.workLocation || '广州市'}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="top">
                <div class="left">
                  <a-popover title="点击切换">
                    <icon-highlight
                      size="25"
                      style="color: #fff"
                      onClick={(e) => {
                        e.stopPropagation();
                        data.layout = true;
                      }}
                    />
                  </a-popover>
                  <p>
                    {data.department}({data.node})
                  </p>
                </div>
                <div class="right">
                  <a-avatar
                    style={{ backgroundColor: '#b8d4ff' }}
                    v-show={data.avatarShow.show}
                    size={40}
                    onClick={(e) => {
                      e.stopPropagation();
                      data.userShow = !data.userShow;
                      getDetails(data.userId, data);
                    }}
                  >
                    <IconUser />
                  </a-avatar>
                  <div class="text">
                    <p>{data.name || '佚名'}</p>
                    <p v-show={data.topPositionShow.show}>
                      {data.position || '经理'}
                    </p>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <a-popover title="员工">
                  <div class="icon" v-show={data.employeeShow.show}>
                    <icon-user size="20" style="margin-right:10px;" />
                    <text> {data.personnel || 20}</text>
                  </div>
                </a-popover>
                <a-popover title="编制">
                  <div class="icon" v-show={data.establishmentShow.show}>
                    <icon-user-group size="20" style="margin-right: 10px;" />
                    <text> {data.authorized}</text>
                  </div>
                </a-popover>
                <a-popover title="职位">
                  <div class="icon" v-show={data.positionShow.show}>
                    <icon-storage size="20" style="margin-right: 10px;" />
                    <text> {data.position || 20}</text>
                  </div>
                </a-popover>
              </div>
            </div>
            <div
              class="bottom-line"
              style={{ height: initStyle.lineHeight + 'px' }}
            >
              <div class={{ 'top-line': data.children }}></div>
            </div>
          </div>
        </>
      );
    };

    const renderView = (
      data: treeDataType,
      type: 'top' | 'last' | 'first' | 'middle' | 'only'
    ) => {
      if (!data) return null;

      const style: any = {
        'border-top': ' 1px solid #d7d7d7',
        width: '50%'
      };

      const children: any = {
        transform: `scale(${proportion.value})`,
        width: type === 'top' ? container.value?.scrollWidth + 'px' : '100%',
        display: 'flex',
        'flex-direction': 'column',
        ' align-items': 'center'
      };
      return (
        <div
          key={data.id}
          class="children"
          style={type === 'top' ? children : { width: '100%' }}
        >
          <div style=" display:flex;position: relative;width: 100%;">
            <div
              style={
                type === 'last' || type === 'middle' ? style : { width: '50%' }
              }
            ></div>
            <div
              style={
                type === 'first' || type === 'middle' ? style : { width: '50%' }
              }
            ></div>
          </div>
          {renderNode(data, type === 'top' ? false : true)}
          {data.children ? (
            <div style="display:flex;" ref={type === 'top' ? container : null}>
              {data.children.map((ele: treeDataType, index: number) => {
                return renderView(
                  ele,
                  changeChildrenShow(index, data.children.length)
                );
              })}
            </div>
          ) : null}
        </div>
      );
    };

    const changeChildrenShow = (index: number, length: number) => {
      if (length === 1) return 'only';
      if (!index) return 'first';
      if (length === index + 1) return 'last';
      return 'middle';
    };
    const add = (record?: any) => {
      if (record) {
        superiorId.value = record.id;
        superiorData.value = record;
        console.log(record, record.id);
      } else {
        superiorId.value = 0;
        superiorData.value = null;
      }
      organizationVisible.value = true;
    };
    const closeOrganizationVisible = (e: boolean) => {
      organizationVisible.value = e;
    };
    const organizationAddEmit = async (formData: any) => {
      try {
        // 储存选择的模板id
        const ids = formData.organizationLists.map(
          (item: any) => item.organizationValue.templateId
        );

        // formData.organizationLists.forEach((item: any) => {
        //   item.organizationalData = [];
        // });

        const templateDetail = await PostOrganizationMerge({
          ids,
          ownerType: 1 // 组织模板默认传1
        });

        const institutionList = templateDetail.map(
          (item1: any, index1: number) => {
            const temp = formData.organizationLists[index1].organizationValue;
            const templateId = item1.id;

            const organizationInstitutionListModel = {
              ...temp,
              templateUseId: templateId,
              numId: formData.organizationLists[index1].numId,
              controlType: 1 // 组织编制类型，默认传1不控编
            };
            const organizationTemplateCtlValue: any = [];

            item1.collectionModel.forEach((item2: any) => {
              item2.controlModel.forEach((item3: any) => {
                // 组织名称
                if (item3.ctlCode === 'C30BBF36A5AF541F7A2657671DEE2EDD6') {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.name
                  );
                }
                // 组织编码
                else if (
                  item3.ctlCode === 'CB1AAC9E508714223BA4D1596FE690877'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.organizationUniqueCode
                  );
                }
                // 组织类型
                else if (
                  item3.ctlCode === 'C3D33FA57216F4968BDE51C31D623FC09'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.ownerId
                  );
                }
                // 编制人数
                else if (
                  item3.ctlCode === 'CD25749DBA68E4BF3BCA616DD63751CB7'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.headcount
                  );
                }
                // 组织负责人
                else if (
                  item3.ctlCode === 'CB0C63F38283045F58FFF1B1EABE5D151'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.responsibleId
                  );
                }
                // 分管领导
                else if (
                  item3.ctlCode === 'CA6BD9CC1C99D4D13AD4F5009EF4F9586'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.leaderId
                  );
                }
                // 上级组织
                else if (
                  item3.ctlCode === 'C073F4F41C46D4CA3AF3BEC1F51A8F410'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.superiorId
                  );
                }
                // 工作地点
                else if (
                  item3.ctlCode === 'CE009C2E2B542409D815F0D3D54FE0E2B'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.workPlace
                  );
                }
                // 是否为独立法人
                else if (
                  item3.ctlCode === 'C37521ED1EF684F1F96B08FF8852E6030'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.islegalPerson
                  );
                }
                // 是否为虚拟组织
                else if (
                  item3.ctlCode === 'C80DC4DFCBE0B4B2F83DA0C353E521691'
                ) {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    temp.isVirtualOrganization
                  );
                } else {
                  pushControl(
                    organizationTemplateCtlValue,
                    templateId,
                    item2,
                    item3,
                    ''
                  );
                }
              });
            });

            return {
              organizationInstitutionListModel,
              organizationTemplateCtlValue
            };
          }
        );

        await PostOrganizationList({
          institutionList
        });
        context.emit('loading');
      } catch (error) {
        console.log(error);
      }
    };
    const pushControl = (
      organizationTemplateCtlValue: any,
      templateId: number,
      collectionData: any,
      controlData: any,
      value: any
    ) => {
      organizationTemplateCtlValue.push({
        templateId,
        subCode: collectionData.subCode,
        subId: collectionData.id,
        ctlCode: controlData.ctlCode,
        ctlId: controlData.id,
        ctlValue: String(value)
      });
    };
    const del = async (id: number) => {
      try {
        if (id === originTreeData.data.id) {
          return Message.error('最顶级的节点不能删除！');
        }
        Modal.confirm({
          title: '提示',
          content: '确定要删除选中的数据吗？',
          onOk: async () => {
            try {
              await DelOrganizationList({
                ids: [id]
              });
              context.emit('loading');
            } catch (error: unknown) {
              console.log(error);
            }
          }
        });
      } catch (error) {
        console.log(error);
      }
    };
    context.expose({ enlarge, shrink });

    // getData
    return () => (
      <div>
        <div class="container" ref={Node}>
          {/* <div class="icons">
          <div class="icon">
            <IconFont type="icon-23fangda" size="22" onClick={enlarge} />
          </div>

          <div class="icon">
            <IconFont type="icon-24suoxiao" size="22" onClick={shrink} />
          </div>
        </div> */}
          {!originTreeData.data?.id ? (
            <>
              <a-empty />
            </>
          ) : (
            <>{renderView(originTreeData.data, 'top')}</>
          )}
        </div>
        <AddOrganization
          onUpdate:visible={(e) => {
            closeOrganizationVisible(e);
          }}
          onOrganizationAddEmit={organizationAddEmit}
          visible={organizationVisible.value}
          superiorData={superiorData.value}
          superiorId={superiorId.value}
        ></AddOrganization>
      </div>
    );
  }
});
// for (let index = 0; index < array.length; index++) {
//   const element = array[index];
//   continue;
// }
</script>

<style lang="less" scoped>
.container {
  height: 600px;
  // width: 1380px;
  position: relative;
  background-color: #f3f8fe;
  overflow: auto;
  cursor: grab;
  .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 145px;
    z-index: 999999;
    left: 1650px;
    padding: 20px;
    color: #4a86ff;
    p {
      padding: 0 10px;
      margin: 0;
    }
    div {
      margin-right: 10px;
    }
    div:nth-child(4) {
      margin-right: 0px;
    }
    .icon {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #4a86ff;
    }
  }
}
.render {
  position: relative;
  padding: 0 10px;

  .vertical-main {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 125px;
    min-height: 332px;
    margin: 0 auto;
    position: relative;
    border: 1px solid #3d7eff;
    // background-color: #fff;
    // width: 250px;
    // height: 100px;
    border-radius: 10px;
    cursor: pointer;
    p {
      padding: 0;
      margin: 0;
      word-wrap: break-word;
    }
    .top {
      display: flex;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
        border-top-left-radius: 8px;
        width: 50px;
        min-height: 218px;
        background-color: #3d7eff;
        p {
          color: #fff;
          width: 16px;
          font-size: 16px;
          margin: 5px auto;
          line-height: 24px;

          text-align: center;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        padding: 10px;
        .text {
          display: flex;
          margin-top: 10px;
          p {
            width: 16px;
            font-size: 16px;
            text-align: center;
          }
          p:nth-child(1) {
            color: #3d7eff;
            margin-right: 10px;
          }
          p:nth-child(2) {
            color: #cccccc;
          }
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;
      padding: 5px 5px;
      color: #666666;
      text {
        color: #3d7eff;
      }
    }
  }
  .main {
    // z-index: 9;
    margin: 0 auto;
    position: relative;
    // background-color: #fff;
    // width: 250px;
    // height: 100px;
    border-radius: 25px;
    cursor: pointer;
    // cursor: grabbing;
    // box-shadow: 0px 10px 15px 5px rgba(0, 0, 0, 0.3);

    .top {
      background-color: #5b8ff9;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      padding: 10px;
      color: #fff;
      display: flex;
      justify-content: space-between;
    }
    .cn,
    .bottom {
      display: flex;
      padding: 10px;
      box-sizing: border-box;
      justify-content: space-between;
      transform: translateY(-5px);
      background-color: #fff;
      font-size: 12px;
    }
    .cn {
      // z-index: 10;
      position: relative;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;

      justify-content: space-between;
      p {
        padding: 0;
        margin: 0;
      }
      p:nth-child(1) {
        padding-bottom: 5px;
        color: #5b8ff9;
        font-size: 14px;
      }
      p:nth-child(2) {
        color: #86909c;
        font-size: 12px;
      }
    }
    .bottom {
      padding-top: 0;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      .icon {
        margin-right: 10px;
        color: #4e5969;
      }
    }
    .operation {
      position: absolute;
      bottom: -52px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      .operation-all {
        padding: 0 20px;
        display: flex;
        // width: 216px;
        background-color: #fff;
        justify-content: space-around;
        padding: 4px;
        border-radius: 4px;
        div:nth-child(1) {
          margin-right: 10px;
        }
      }
    }
  }
  .head-line {
    position: relative;
    display: flex;
    justify-content: center;
    // height: 44px;
    // background-color: #6aa1ff;
    width: 100%;
    .bon-line {
      height: 100%;
      width: 1px;
      background-color: #d7d7d7;
    }
  }
  .bottom-line {
    display: flex;
    justify-content: center;
    // height: 44px;
    // background-color: #6aa1ff;
    width: 100%;
    .top-line {
      height: 100%;
      width: 1px;
      background-color: #d7d7d7;
    }
  }
  .duty-mian {
    p {
      padding: 0;
      margin: 0;
    }
    border-radius: 10px;
    width: 480px;
    z-index: 999;
    position: absolute;
    top: -40px;
    right: -455px;
    // z-index: 10;
    background-color: #fff;
    margin-bottom: 20px;
    overflow: hidden;
    .title {
      padding: 10px;
      border-bottom: 1px solid #e4e4e4;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .user {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        div:nth-child(2) {
          margin-left: 5px;
        }
      }
    }
    .information {
      display: flex;
      // justify-content: space-between;
      padding: 10px;
      overflow: hidden;
      div:nth-child(1) {
        width: 150px;
        margin-right: 60px;
      }
      div:nth-child(2) {
        flex: 1;
        overflow: hidden;
      }
      div {
        p {
          margin-bottom: 5px;
          text-align: start;
        }
      }
    }
  }
}
.personnelData {
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px;
  div {
    box-sizing: border-box;
    margin: 5px 0;
    padding-right: 5px;
    width: 50%;
  }
}
</style>
